<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>武汉美食 POI 查询系统</title>
  <script src="https://webapi.amap.com/maps?v=2.0&key=2024c5f9433e3501f4292255e7fd83e6"></script>
  <style>
    html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      font-family: sans-serif;
    }
    #map-container {
      width: 70%;
      height: 100vh;
      float: left;
    }
    #sidebar {
      width: 30%;
      height: 100vh;
      float: right;
      padding: 10px;
      box-sizing: border-box;
      overflow-y: auto;
      background: #f5f5f5;
    }
    input, select {
      width: 100%;
      margin: 5px 0;
      padding: 5px;
    }
    .poi-card {
      background: white;
      padding: 10px;
      margin: 10px 0;
      border-radius: 5px;
      box-shadow: 0 0 4px rgba(0,0,0,0.1);
    }
    #search-form input, #search-form select { margin: 4px 0; width: 100%; box-sizing: border-box; }
  </style>
</head>
<body>
  <div id="map-container"></div>
  <div id="sidebar">
    <h3>查询条件</h3>
    <form id="search-form">
      <input type="text" id="shop_name" placeholder="店铺名称">
      
      <select id="category">
        <option value="">全部分类</option>
        <option value="五谷杂粮">五谷杂粮</option>
        <option value="早餐">早餐</option>
        <option value="烧烤">烧烤</option>
        <option value="面包甜点">面包甜点</option>
      </select>
    
      <select id="region">
        <option value="">全部地区</option>
        <option value="武昌">武昌</option>
        <option value="汉口">汉口</option>
        <option value="汉阳">汉阳</option>
        <option value="青山">青山</option>
        <option value="蔡甸">蔡甸</option>
        <option value="硚口">硚口</option>
        <option value="江夏">江夏</option>
      </select>
    
      <select id="business_hours">
        <option value="">全部时段</option>
        <option value="早餐">早餐</option>
        <option value="午餐">午餐</option>
        <option value="晚餐">晚餐</option>
        <option value="夜宵">夜宵</option>
      </select>
    
      <input type="text" id="cuisine_type" placeholder="菜系类型">
      
      <input type="number" id="people" placeholder="用餐人数">
      
      <input type="number" id="min_price" placeholder="最低价格">
      <input type="number" id="max_price" placeholder="最高价格">
    
      <input type="text" id="recommend_level" placeholder="推荐等级">
    
      <button type="submit">搜索</button>
    </form>
    <h3>查询结果</h3>
    <div id="poiList"></div>
  </div>

  <script src="main.js"></script>
</body>
</html>
